<div id="portfolio-con" class="content">
    <div id="portfolio-wrap">
        <table width="100%">
            <tr>
                <td>
                    <div class="left-con">
                        <div class="separator" style="height:130px;"></div>
                        <div class="years">
                            <?php
                            $length = count($portfolios);
                            if($length > 0) for ($year = $active_year + 2; $year >= $active_year - 2; --$year) :
                            ?>
                                <a <?php if ($year == $active_year)
                                echo 'class="active"' ?> href="<?php echo base_url("portfolio/index/$year") ?>"><?php echo $year ?></a>
                            <?php endfor; ?>
                        </div>
                    </div>
                </td>
                <td>
                    <div class="center-con">
                        <div class="center-separator"></div>
                        <div class="content-title">
                            <img src="<?php echo base_url(); ?>assets/images/portfolio-title.png"/> <?php if ($admin) :?><span class="create">(<a href="<?php echo base_url('portfolio/create'); ?>">Tambah</a>)</span><?php endif;?>
                        </div>
                        <div class="content-main">
                            <?php
                            if ($length > 0) :
                                ?>
                                <!-- container for the slides -->
                                <div class="items">
                                    <?php
                                    for ($i = 0; $i < $length;) :
                                        ?>
                                        <div>
                                            <?php
                                            for ($j = 0; $j < 2; ++$j) :
                                                if ($i < $length) :
                                                    ?>
                                                    <div id="portfolio-<?php echo $portfolios[$i]->idportofolio ?>">
                                                        <?php
                                                        $gambar = $portfolios[$i]->gambar_utama;
                                                        if (empty($gambar)) {
                                                            $gambar = 'default.gif';
                                                        }
                                                        ?>
                                                        <img alt="<?php echo $gambar ?>" src="<?php echo base_url() . "/assets/images/portfolio/" . $gambar ?>" />
                                                        <div class="front">
                                                            <div class="title">
                                                                <span><?php echo $portfolios[$i]->judul; ?><?php if ($admin) :?><span class="admin">(<a href="<?php echo base_url("portfolio/update/{$portfolios[$i]->idportofolio}")?>">ubah</a> | <a href="<?php echo base_url("portfolio/delete/{$portfolios[$i]->idportofolio}")?>">hapus</a>)</span><?php endif; ?></span>
                                                            </div>
                                                        </div>
                                                    </div>
                                            <?php ++$i;endif;endfor; ?>
                                        </div>
                                    <?php endfor; ?>
                                </div>

                                <!-- "previous slide" button -->
                                <a class="backward" href="#"><img alt="left" src="<?php echo base_url() ?>assets/images/portfolio/left.png" /></a>

                                <!-- "next slide" button -->
                                <a class="forward" href="#"><img alt="right" src="<?php echo base_url() ?>assets/images/portfolio/right.png" /></a>

                                <!-- the tabs -->
                                <div class="slidetabs">
                                    <?php for ($i = 0; $i < ($length / 2); ++$i) : ?>
                                        <a href="#"></a>
                                    <?php endfor; ?>
                                </div>
                        <?php endif; ?>
                        </div>
                    </div>
                </td>
                <td>
                    <div class="right-con">

                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>
<script type="text/javascript">
    $(".slidetabs").tabs(".items > div", {

        // enable "cross-fading" effect
        effect: 'fade',
        fadeOutSpeed: "slow",

        // start from the beginning after the last tab
        rotate: true

        // use the slideshow plugin. It accepts its own configuration
    }).slideshow({clickable: false});
    
    $(".items > div > div").click(function(){
        var body = $("body");
        var cover = document.createElement("div");
        var project = this;
        
        // Cover
        cover.setAttribute("id", "cover");
        cover.style.width = body.css('width');
        cover.style.height = body.css('height');
        cover.style.zIndex = '10000';
        cover.style.position = 'absolute';
        cover.style.top = cover.style.left = '0';
        cover.style.backgroundColor = 'rgba(0,0,0,0.7)';
        cover.style.display = 'none';
        body.append(cover);
        $(cover).fadeIn('slow', function(){
            // Popup
            $.ajax({
                url: "<?php echo base_url(); ?>/portfolio/project/" + $(project).attr("id").substr(10),
                success: function(html){
                    body.append(html);

                    var popup = $("#popup");
                    popup.css('z-index', '10000');
                    popup.css('left', ((body.width() - popup.width()) / 2));
                    popup.css('top', ((body.height() - popup.height()) / 2));
                    popup.fadeIn('fast');

                    $("#popup .slidetabs").tabs("#popup .items > img", {
                        effect: 'fade',
                        fadeOutSpeed: "slow",
                        rotate: true
                    }).slideshow({next: '.right', prev: '.left'});
                    $("#popup > .text > .description").niceScroll({zindex:10010,cursorcolor:"#898989",cursoropacitymin:1,cursorwidth:"3px",cursorborderround:"0px"});
                }
            });
        });
    });
    
    $("#popup > .close").live('click', (function(){
        $("#popup").fadeOut('fast', function(){
            $(this).remove();
            $("#popup > .text > .description").getNiceScroll().remove();
            
            $("#cover").fadeOut('fast', function(){
                $(this).remove();
            });
        });
    }));
</script>